<!--
 * @Author: egg1bro
 * @Date: 2022-12-29 17:40:37
<<<<<<< HEAD
 * @LastEditTime: 2023-01-01 10:47:02
=======
 * @LastEditTime: 2023-01-10 15:25:41
>>>>>>> egg1bro
 * @LastEditors: egg1bro
 * @Description: 
 * @FilePath: \team-graduation-design\src\views\Set\index.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="page">
        <div class="list">
            <van-nav-bar title="设置">
                <template #left>
                    <van-icon name="arrow-left" size="20" color="black" @click="goMe" style="margin-left: 8px;" />
                </template>
            </van-nav-bar>
            <van-nav-bar>
                <template #left>
                    <div class="listname">账号管理</div>
                </template>
                <template #right>
                    <van-icon name="arrow" size="18" color="#d4d4d4" />
                </template>
            </van-nav-bar>
        </div>
        <div class="list1">
            <van-nav-bar style="margin-bottom: 2px;">
                <template #left>
                    <div class="listname">消息推送设置</div>
                </template>
                <template #right>
                    <van-icon name="arrow" size="18" color="#d4d4d4" />
                </template>
            </van-nav-bar>
            <van-nav-bar>
                <template #left>
                    <div class="listname">语言设置</div>
                </template>
                <template #right>
                    <van-icon name="arrow" size="18" color="#d4d4d4" />
                </template>
            </van-nav-bar>
        </div>
        <div class="list2">
            <van-nav-bar style="margin-bottom: 2px;">
                <template #left>
                    <div class="listname">管理存储空间</div>
                </template>
                <template #right>
                    <van-icon name="arrow" size="18" color="#d4d4d4" />
                </template>
            </van-nav-bar>
            <van-nav-bar style="margin-bottom: 2px;">
                <template #left>
                    <div class="listname">意见反馈</div>
                </template>
                <template #right>
                    <van-icon name="arrow" size="18" color="#d4d4d4" />
                </template>
            </van-nav-bar>
            <van-nav-bar style="margin-bottom: 2px;">
                <template #left>
                    <div class="listname">版本更新</div>
                </template>
                <template #right>
                    <van-icon name="arrow" size="18" color="#d4d4d4" />
                </template>
            </van-nav-bar>
            <van-nav-bar>
                <template #left>
                    <div class="listname">关于数字学院</div>
                </template>
                <template #right>
                    <van-icon name="arrow" size="18" color="#d4d4d4" />
                </template>
            </van-nav-bar>
        </div>
        <div class="outlogin">
            <van-nav-bar>
                <template #left>
                    <div class="listname" @click="logout">退出登录</div>
                </template>
                <template #right>
                    <van-icon name="arrow" size="18" color="#d4d4d4" />
                </template>
            </van-nav-bar>
        </div>
    </div>

</template>

<script setup>
import { useRouter } from 'vue-router'
// 实例化路由
const router = useRouter()

const goMe = () => {
    router.push('/me')
}


// 退出登录
const logout = () => {
    localStorage.removeItem('token')
    router.push('/login')
}
</script>

<style lang="less" scoped>
// 设置当前页面默认背景颜色
.page {
    width: 100%;
    height: 100%;
    background-color: #f5f6f8;
    // 此处写fixed才能应用到当前页面公共背景颜色
    position: fixed;
}

.van-hairline--bottom:after {
    border-bottom-width: 0;
}

.listname {
    color: #6e6e6e;
    margin-left: 15px;

}

.list {
    margin-bottom: 12px;
}

.list1 {
    margin-bottom: 12px;

}

.list2 {
    margin-bottom: 12px;
}

.outlogin {
    .listname {
        color: #fd8787;
    }
}
</style>